<template>
  <div class="global-search">
    <div class="search-input">
      <input
        type="text"
        v-model="searchQuery"
        placeholder="搜索..."
        @focus="showResults = true"
        @keydown.esc="closeSearch"
        @keydown.enter="performSearch"
      >
      <div class="search-shortcuts">
        <span>按 <kbd>/</kbd> 搜索</span>
        <span>按 <kbd>ESC</kbd> 关闭</span>
      </div>
    </div>

    <div 
      v-if="showResults && searchQuery"
      class="search-results"
    >
      <div class="results-section" v-if="boards.length">
        <h3>看板</h3>
        <div 
          v-for="board in boards"
          :key="board._id"
          class="result-item"
          @click="navigateToBoard(board)"
        >
          <div 
            class="board-color"
            :style="{ backgroundColor: board.color }"
          />
          <span>{{ board.title }}</span>
        </div>
      </div>

      <div class="results-section" v-if="cards.length">
        <h3>卡片</h3>
        <div 
          v-for="card in cards"
          :key="card._id"
          class="result-item"
          @click="navigateToCard(card)"
        >
          <span class="card-title">{{ card.title }}</span>
          <span class="board-name">{{ card.board.title }}</span>
        </div>
      </div>

      <div v-if="!boards.length && !cards.length" class="no-results">
        未找到相关结果
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useSearchStore } from '../../stores/search';
import { useKeyboard } from '../../composables/keyboard';

const router = useRouter();
const searchStore = useSearchStore();

const searchQuery = ref('');
const showResults = ref(false);
const boards = ref([]);
const cards = ref([]);

// 监听搜索输入
watch(searchQuery, async (newQuery) => {
  if (newQuery.length >= 2) {
    const results = await searchStore.search(newQuery);
    boards.value = results.boards;
    cards.value = results.cards;
  } else {
    boards.value = [];
    cards.value = [];
  }
}, { debounce: 300 });

// 快捷键支持
useKeyboard('/', (e) => {
  e.preventDefault();
  document.querySelector('.search-input input').focus();
});

const closeSearch = () => {
  showResults.value = false;
  searchQuery.value = '';
};

const performSearch = () => {
  if (boards.value.length) {
    navigateToBoard(boards.value[0]);
  } else if (cards.value.length) {
    navigateToCard(cards.value[0]);
  }
};

const navigateToBoard = (board) => {
  router.push(`/board/${board._id}`);
  closeSearch();
};

const navigateToCard = (card) => {
  router.push(`/board/${card.board._id}?card=${card._id}`);
  closeSearch();
};
</script>

<style scoped>
.global-search {
  position: relative;
  width: 100%;
  max-width: 480px;
}

.search-input {
  position: relative;
}

.search-input input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #DFE1E6;
  border-radius: 3px;
}

.search-shortcuts {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #5E6C84;
  font-size: 12px;
}

kbd {
  background: #DFE1E6;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 11px;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 3px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  margin-top: 4px;
  max-height: 400px;
  overflow-y: auto;
}

.results-section {
  padding: 8px;
}

.results-section h3 {
  color: #5E6C84;
  font-size: 12px;
  margin-bottom: 4px;
}

.result-item {
  display: flex;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  border-radius: 3px;
}

.result-item:hover {
  background: #F4F5F7;
}

.board-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-right: 8px;
}

.card-title {
  flex: 1;
}

.board-name {
  font-size: 12px;
  color: #5E6C84;
}

.no-results {
  padding: 24px;
  text-align: center;
  color: #5E6C84;
}
</style> 